<template>
    <div class="card-item shadow-sm" v-loading="dataStatus=='loading'">
        <div class="h-full flex-center" v-if="dataStatus=='error'">
            <component-page-loading font-size="1rem" status="error" @reload="getData"></component-page-loading>
        </div>
        <div class="h-full flex flex-col justify-between" v-else>
            <div class="item-title">
                <div>{{ params.name }}
                    <router-link :to="{name:params.link}" v-if="params.link != null">
                        <font-awesome-icon icon="link" class="link-icon"></font-awesome-icon>
                    </router-link>
                </div>
                <div class="item-number">
                    <component-page-numeral :num="total" format="0,0.[00]"></component-page-numeral>
                </div>
                <component-page-date-picker-day v-model="filterOption.datetime" @change="getData"></component-page-date-picker-day>
            </div>
            <div class="item-chart">
                <component-page-echarts ref="chartLine"></component-page-echarts>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        params: Object,
    },
    data() {
        return {
            filterOption: {
                datetime: [
                    this.$store.getters['config/timedDayTimestamp'](),
                    this.$store.getters['config/timedDayTimestamp']() + 86400 - 1
                ],
            },
            dataStatus: 'dle',
            total: 0,
        }
    },
    methods: {
        initChart(chart) {
            this.$refs.chartLine.setOption({
                color: [this.params.color],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    }
                },
                grid: {
                    top: 6,
                    right: 0,
                    bottom: 0,
                    left: 0,
                },
                xAxis: {
                    show: false,
                    boundaryGap: false,
                    data: chart.timed
                },
                yAxis: {
                    show: false,
                },
                series: [{
                    type: 'line',
                    areaStyle: {},
                    showSymbol: false,
                    smooth: true,
                    smoothMonotone: 'x',
                    data: chart.data.map(item => this.$store.getters['config/filterNumeral'](item, {mantissa: 2}))
                }]
            });
        },
        getData() {
            this.dataStatus = 'loading';
            axios.get(this.params.uri, {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.total = response.data.resp_data.total;
                    this.dataStatus = 'dle';
                    // 渲染图表
                    this.initChart(response.data.resp_data.chart);
                } else {
                    this.dataStatus = 'error';
                }
            });
        },
    },
    mounted() {
        this.getData();
    },
}
</script>

<style lang="scss" scoped>
.card-item {
    background-color: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    height: 170px;
}

.card-item .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 20px;
    height: 60px;
}

.card-item .item-number {
    font-size: 2rem;
    position: absolute;
    left: 20px;
    top: 45px;
}

.card-item .item-chart {
    height: 80px;
}
</style>
